<template>
  <div class="tabber-style">
    <div class="bottom-tab" v-for="(item,index) of list" :key="index" @click="handleOperationClick(item.type)">
      <img :src="item.url"/>
      <div>{{item.title}}</div>
    </div>
	<div class="fl-model" v-if="isShow" catchtouchmove >
	  <div class="model shadow" >
	    <div class="code-input">
	      <div>授权码</div>
	      <input placeholder="请输入" v-model="code">
	    </div>
	    <div class="model-button">
	      <div class="button-true button-fasle" @click="close">取消</div>
	      <div class="button-true" @click="handleCommitCode">确定</div>
	    </div>
	  </div>
	</div>
  </div>
</template>

<script>
export default {
  name: "tabber",
  props: {
    submitList: {
      type: Object,
      default:{
        a:123
      }
    }
  },
  data() {
    return {
      pageWidth:'',
	  isShow: false,
	  code: '',
      list: [
        {title:'分类说明',url: require('@/static/icon/icon_fenlei@3x.png'),type:0},
        {title:'查找',url:require('@/static/icon/icon_chaxun@3x.png'),type:1},
        {title:'新建标准',url:require('@/static/icon/icon_xinjian@3x.png'),type:2},
      ]
    }
  },
  methods: {
    handleOperationClick(type){
      if(type === 0){
        wx.navigateTo({
          url: '/pages/classPage'
        })
      }
      if(type === 2){
		  this.isShow = true
      }
      if(type === 1){
        wx.navigateTo({
          url: '/pages/searchPage?submitList=' +  JSON.stringify(this.submitList)
        })
      }
    },
	/**
	 * 关闭弹框
	 */
	close() {
		this.isShow = false
	},
	/**
	 * 确认跳转权限
	 */
	handleCommitCode(){
	  if(!this.code) return wx.showToast({title: '请输入授权码',icon: 'none'})
	  this.$api.UserPortalStandardVerifyCode({code: this.code}).then(res => {
		 wx.showToast({
		 	title: '授权成功',
		 })
		 this.close()
		 wx.navigateTo({
		   url: '/pages/newBuild'
		 })
	  })
	},
  }
}
</script>

<style scoped lang="scss">
  .tabber-style {
    padding: 16rpx 40rpx;
    display: flex;
    background-color: #FFFFFF;
    border-top: 2rpx #EEEEEE solid;
    color: #111111;
    width: 100%;
    font-size: 28rpx;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    position: fixed;
    bottom: 0;
    .bottom-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100vw;
      height: 90rpx;
      img {
        width: 45rpx;
        height: 45rpx;
      }
    }
  }
  
  @keyframes show {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .fl-model {
    animation: show 0.5s;
    position: fixed;
	top: 0;
	left: 0;
    z-index: 1000;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(0,0,0,0.7);
    .model {
      background-color: #FFFFFF;
      width: 650rpx;
      min-height: 280rpx;
      display: flex;
      border-radius: 16rpx;
      flex-direction: column;
      justify-content: space-between;
      padding: 24rpx;
      .code-input {
        width: 100%;
        padding: 28rpx;
        font-size: 40rpx;
        font-weight: 700;
        align-items: center;
        justify-content: space-between;
        display: flex;
        div {
          color: #59AC35;
        }
        input {
          margin-left: 26rpx;
          border: rgba(89,172,53,1) 2rpx solid;
          padding: 16rpx;
          height: 80rpx;
          width: 70%;
          font-size: 32rpx;
        }
      }
      .model-button {
        width: 100%;
        display: flex;
        justify-content: space-around;
        .button-true {
          width: 230rpx;
          height: 60rpx;
          display: flex;
          border-radius: 12rpx;
          background-color: #59AC35;
          color: #FFFFFF;
          font-size: 40rpx;
          justify-content: space-around;
          align-items: center;
          font-weight: 700;
        }
        .button-fasle {
          border: 2rpx #59AC35 solid;
          background-color: #FFFFFF;
          color: #59AC35;
        }
      }
    }
  }
</style>
